import React, { Component } from 'react';
import { Form, Select, Input, Modal, Col, Row, Radio } from 'antd';
import Tips from '../../../Tips/index';
const FormItem = Form.Item;
const Option = Select.Option;

class Addpeer extends Component {
  constructor() {
    super();
    this.state = {
      controller: false,
      address: false,
      baas: false,
      peerSet: 'V1',
      setCPU: '2',
      setRAM: '2',
      setROM: '32',
      setM: '2',
      httpaddress: '',
      message: ''
    };
  }
  set = (ev) => {
    this.setState({
      versionV: ev
    });
  }
  changePeerSet = (ev) => {
    if (ev == 'V1') {
      this.setState({
        setCPU: '2',
        setRAM: '2',
        setROM: '32',
        setM: '2'
      });
    }
    this.setState({
      peerSet: ev
    });
  }
  setCPU = (ev) => {
    this.setState({
      setCPU: ev
    });
  }
  setRAM = (ev) => {
    this.setState({
      setRAM: ev
    });
  }
  setROM = (ev) => {
    this.setState({
      setROM: ev
    });
  }
  setM = (ev) => {
    this.setState({
      setM: ev
    });
  }
  controller = () => {
    this.setState({ controller: !this.state.controller });
  }
  address = () => {
    this.setState({ address: !this.state.address });
  }
  baas = () => {
    this.setState({ baas: !this.state.baas });
  }
  changeaddress = (ev) => {
    this.setState({ httpaddress: ev.target.value });

  }
  submit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        var rename = false;
        this.props.data.forEach((e, i) => {
          if (e.name == values.PeerName) rename = true;
        });
        if (rename) {
          this.setState({
            message: 'Peer节点重名，请更换节点名'
          }, () => {
            setTimeout(() => {
              this.setState({
                message: ''
              });
            }, 1000);
          });
        } else {
          if (this.state.peerSet == 'V3') {
            if (this.state.address) {
              if (!this.state.httpaddress) {
                this.setState({
                  message: '请填写公网访问地址'
                }, () => {
                  setTimeout(() => {
                    this.setState({
                      message: ''
                    });
                  }, 1000);
                });
              } else {
                this.props.addsubmit(this.state, values);
              }
            } else {
              this.props.addsubmit(this.state, values);
            }
          } else {
            this.props.addsubmit(this.state, values);
          }
        }
      }
      console.log('Received values of form: ', values);
    });
  }
  render() {
    const { visible, onCancel, form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Modal
        visible={visible}
        title="配置Peer节点"
        okText="确认"
        cancelText="取消"
        closable={false}
        onCancel={onCancel}
        onOk={this.submit}
      >
        <Form>
          <FormItem
            label="Peer节点名称"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 15 }}
          >
            {getFieldDecorator('PeerName', {
              rules: [{ required: true, message: '5-10个字符，必须包含英文和数字，不可使用特殊字符', pattern: /^(?![a-zA-Z]+$)(?!\d+$)[a-zA-Z0-9]{5,10}$/ }],
            })(
              <Input placeholder="请输入Peer节点名称" />
            )}
          </FormItem>
          <FormItem
            label="Peer节点配置"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 15 }}
          >
            <Select defaultValue="V1" onChange={this.changePeerSet} >
              <Option key={1} value="V1" >默认服务器配置</Option>
              <Option key={2} value="V2" >自定义服务器配置</Option>
              <Option key={3} value="V3" >搭建私服</Option>
            </Select>
          </FormItem>
          <Row gutter={20} className="rowselect" style={{ display: this.state.peerSet == 'V3' ? 'none' : '' }}>
            <Col span={5}>
              <FormItem label="CPU">
                <Select defaultValue="2" value={this.state.setCPU} onChange={this.setCPU} disabled={this.state.peerSet == 'V1' ? true : false}>
                  <Option key={1} value="2" >2</Option>
                  <Option key={2} value="4" >4</Option>
                  <Option key={3} value="8" >8</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="内存（GB）">
                <Select defaultValue="2" value={this.state.setRAM} onChange={this.setRAM} disabled={this.state.peerSet == 'V1' ? true : false} >
                  <Option key={1} value="2" >2</Option>
                  <Option key={2} value="4" >4</Option>
                  <Option key={3} value="8" >8</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="硬盘（GB）">
                <Select defaultValue="32" value={this.state.setROM} onChange={this.setROM} disabled={this.state.peerSet == 'V1' ? true : false} >
                  <Option key={1} value="32" >32</Option>
                  <Option key={2} value="64" >64</Option>
                  <Option key={3} value="128" >128</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="带宽（Mbps）">
                <Select defaultValue="2" value={this.state.setM} onChange={this.setM} disabled={this.state.peerSet == 'V1' ? true : false}>
                  <Option key={1} value="2" >2</Option>
                  <Option key={2} value="4" >4</Option>
                  <Option key={3} value="10" >10</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <div style={{ display: this.state.peerSet == 'V3' ? '' : 'none' }}>
            <FormItem
              labelCol={{ span: 15 }}
              wrapperCol={{ span: 15 }}
              style={{ marginLeft: '60px', marginBottom: '0px' }}
            >
              <Radio onClick={this.controller} checked={this.state.controller} style={{ marginLeft: '-20px' }} >
                  搭建私服
              </Radio>
            </FormItem>
            <FormItem
              labelCol={{ span: 15 }}
              wrapperCol={{ span: 15 }}
              style={{ marginLeft: '60px', marginBottom: '0px' }}
            >
              <Radio onClick={this.address} checked={this.state.address} >
                公网访问地址：
                <Input placeholder="请输入公网访问地址" onChange={this.changeaddress} />
              </Radio>
            </FormItem>
            <FormItem
              labelCol={{ span: 15 }}
              wrapperCol={{ span: 15 }}
              style={{ marginLeft: '60px', marginBottom: '0px' }}
            >
              <Radio onClick={this.baas} checked={this.state.baas} >
                Baas平台转接
              </Radio>
            </FormItem>
          </div>
        </Form>
        <Tips message={this.state.message} />
      </Modal>
    );
  }
}

const AddPeer = Form.create()(Addpeer);
export default AddPeer;
